<template>
  <BaseCard class="h-full">
    <template #header>
      <div class="flex justify-between">
        <div class="title flex items-center">
          <div class="head-icon"></div>
          常用功能
        </div>
      </div>
    </template>
    <div class="flex flex-wrap pt-[20px]">
      <router-link class="enter-item" to="/project/zx/lxxm/index">
        <img src="@/assets/images/entericon1.png" alt="" />
        <div class="enter-name">纵向项目</div>
      </router-link>
      <router-link class="enter-item" to="/project/yf/jzhtqd/index">
        <img src="@/assets/images/entericon2.png" alt="" />
        <div class="enter-name">横向项目</div>
      </router-link>
      <router-link class="enter-item" to="/project/xj/xmlx/index">
        <img src="@/assets/images/entericon3.png" alt="" />
        <div class="enter-name">校级项目</div>
      </router-link>
      <router-link class="enter-item" to="/achievement/kycg/xslw/index">
        <img src="@/assets/images/entericon4.png" alt="" />
        <div class="enter-name">论文</div>
      </router-link>
      <router-link class="enter-item" to="/achievement/zscq/bz/index">
        <img src="@/assets/images/entericon5.png" alt="" />
        <div class="enter-name">标准</div>
      </router-link>
      <router-link class="enter-item" to="/achievement/zscq/zlgl/index">
        <img src="@/assets/images/entericon7.png" alt="" />
        <div class="enter-name">专利</div>
      </router-link>
      <router-link class="enter-item" to="/achievement/kycg/xszz/index">
        <img src="@/assets/images/entericon6.png" alt="" />
        <div class="enter-name">著作</div>
      </router-link>
      <router-link class="enter-item" to="/achievement/zscq/zzq/index">
        <img src="@/assets/images/entericon8.png" alt="" />
        <div class="enter-name">著作权</div>
      </router-link>
      <!-- <div class="enter-item">
        <img src="@/assets/images/entericon7.png" alt="" />
        <div class="enter-name">专利</div>
      </div> -->
    </div>
  </BaseCard>
</template>

<script setup>
import BaseCard from "./BaseCard.vue";
</script>

<style scoped lang="scss">
@import url("../index.scss");
.head-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background: url("@/assets/images/enter-header-icon.png") no-repeat center center,
    linear-gradient(-90deg, #0099ff 0%, #25a8ff 100%);
  box-shadow: 2px 2px 7px 0px rgba(20, 137, 214, 0.26);
  border-radius: 4px;
}
.enter-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 10px;
  flex-basis: 25%;
  font-size: 16px;
  color: #333;
  padding: 0 5px;
  &:nth-child(n + 5) {
    margin-bottom: 0;
  }
}
.enter-name {
  margin-top: 10px;
}
</style>
